<template>
  <div class="registered-page">
    <navigation-bar pageName='注册'
                    @onLeftClick='onLeftClick'>
    </navigation-bar>
    <div class="registered-page-content">
      <!-- 用户名 -->
      <div class="input-container">
        <input type="text"
               placeholder="用户名"
               v-model="username">
      </div>
      <!-- 密码 -->
      <div class="input-container">
        <input type="password"
               placeholder="用户名"
               v-model="password">
      </div>
      <!-- 确认密码 -->
      <div class="input-container">
        <input type="password"
               placeholder="确认密码"
               v-model="surePassword">
      </div>
      <div class="page-commit registered-page-content-registered"
           @click="onRegisteredClick">
        确定
      </div>
    </div>
  </div>
</template>
<script>
import NavigationBar from '@c/currency/NavigationBar.vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      surePassword: ''
    }
  },
  components: {
    NavigationBar
  },
  methods: {
    onLeftClick () {
      this.$router.go(-1)
    },
    onRegisteredClick () {
      if (this.username.length === 0 || this.password.length === 0) {
        alert('请输入用户名或密码')
        return
      } else if (this.password !== this.surePassword) {
        alert('两次密码不一样')
        return
      }
      // 与原生交互，保存用户输入的用户名或密码
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.registered-page {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  &-content {
    width: 100%;
    height: 100%;
    &-registered {
      margin-top: px2rem(40);
    }
  }
}
</style>